<template>
	<div>
		<my-table ref="tableObj" :pagable="pagable" :perPage="perPage" :totalRows="totalRows" :title="title" :fields="fields"
		 :oprable="oprable" :customCells="customCells" :oprs="oprs" :index="indexable" :selectable="selectable" :items="items"
		 @table-page="tablePage" @item-new="itemNew" @items-delete="itemsDelete" @item-delete="itemDelete" @item-view="itemView">

			<template v-slot:after-tools-before-table>
				<b-container fluid>
					<b-row>
						<b-col cols="12">
							<file-upload ref="fileUploadObj" @file-upload-success="fileUploadSuccess" :closeable="upload.closeable"
							 :showProgressInUploadArea="upload.showProgressInUploadArea" :showProgressUnderUploadArea="!upload.showProgressInUploadArea"
							 :height="upload.height"></file-upload>
						</b-col>
					</b-row>
				</b-container>
			</template>

			<template v-slot:custom-cells-cell(fileName)="{data}">
				<b-container>
					<b-row>
						<b-col cols="1" v-if="data.item.wasImage">
							<img @dblclick="imageDetails($event, data.item)" :src="data.item.url" class="image-in-table" />
						</b-col>
						<b-col cols="11">
							<div>{{data.item.originFileName}}</div>
							<div>{{data.item.fileName}}</div>
						</b-col>
					</b-row>
				</b-container>
			</template>

			<template v-slot:custom-cells-cell(fileSize)="{data}">
				<span>{{hFileSize(data.item.fileSize)}}</span>
			</template>

			<template v-slot:custom-cells-cell(uploadTime)="{data}">
				<span>{{ formatUploadTime(data.item.uploadTime) }}</span>
			</template>
		</my-table>
	</div>
</template>

<script>
	import MyTable from '../commons/Table.vue'
	import axios from 'axios'
	import gl from '../commons/global_variable.js'
	import utils from '../commons/utils.js'
	import FileUpload from '../commons/FileUpload.vue'

	export default {
		name: "Medias",
		components: {
			MyTable,
			FileUpload
		},
		data: function() {
			return {
				upload: {
					closeable: true,
					showProgressInUploadArea: true,
					height: 300
				},
				title: "媒体列表",
				indexable: true,
				selectable: true,
				oprable: true,
				pagable: true,
				perPage: 15,
				totalRows: 0,
				currentPage: 0,
				oprs: {
					new: true,
					mdel: true,
					view: true,
					del: true
				},
				fields: [{
					key: "fileName",
					label: "文件名"
				}, {
					key: "fileType",
					label: "文件类型"
				}, {
					key: "fileSize",
					label: "文件大小"
				}, {
					key: "uploadTime",
					label: "上传时间"
				}, {
					key: "remark",
					label: "备注"
				}],
				items: [],
				customCells: [
					"cell(fileName)", "cell(fileSize)", "cell(uploadTime)"
				]
			}
		},
		created: function() {
			this.$store.commit('menuFoucsOpr', 'medias')
			this.getItems()
		},
		methods: {
			fileUploadSuccess: function(value) {
				this.items.unshift(value.item)
			},
			imageDetails: function($event, item) {
				$event.stopPropagation()
				$event.preventDefault()
				this.itemView(item)
			},
			formatUploadTime: function(val) {
				return utils.wg.formatDateTime(val)
			},
			hFileSize: function(value) {
				return utils.wg.hFileSize(value)
			},
			getItems: function() {
				var that = this
				axios.post(gl.cms_args.server_url + 'media/list', {
					page: that.currentPage,
					size: that.perPage
				}).then(function(response) {
					var res = response.data
					if (res.code === gl.cms_args.success) {
						that.items = res.data.records
						that.perPage = res.data.size
						that.totalRows = res.data.total
					} else {
						that.$refs.tableObj.onQueryError()
					}
				}).catch(function(error) {
					that.$refs.tableObj.onQueryError()
				})
			},
			itemNew: function() {
				this.$refs.fileUploadObj.setCloseValue(false)
			},
			itemView: function(item) {
				this.$router.push({
					name: "media-detail",
					params: {
						id: item.id
					}
				})
			},
			itemDelete: function(item) {
				var that = this
				axios.get(gl.cms_args.server_url + 'media/del?id=' + item.id).then(function(response) {
					var res = response.data
					if (res.code === gl.cms_args.success) {
						that.$refs.tableObj.onDeleteSuccess()
						that.getItems()
					} else {
						that.$refs.tableObj.onDeleteError()
					}
				}).catch(function(error) {
					that.$refs.tableObj.onDeleteError()
				})
			},
			itemsDelete: function(items) {
				var that = this
				var ids = items.map(function(item) {
					return item.id
				})
				axios.post(gl.cms_args.server_url + 'media/mdel', ids).then(function(response) {
					var res = response.data
					if (res.code === gl.cms_args.success) {
						that.$refs.tableObj.onDeleteSuccess()
						that.getItems()
					} else {
						that.$refs.tableObj.onDeleteError()
					}
				}).catch(function(error) {
					that.$refs.tableObj.onDeleteError()
				})
			},
			tablePage: function(pageObj) {
				this.currentPage = pageObj.currentPage
				this.perPage = pageObj.perPage
				this.getItems()
			}
		},
		mounted: function(){
			this.$refs.fileUploadObj.setCloseValue(true)
		}
	}
</script>

<style>
	.image-in-table {
		height: 3.125rem;
		width: 3.125rem;
	}

</style>
